<template>
  <view class="container">
    <!-- 宠物详细信息展示 -->
    <view v-if="pet" class="pet-details">
      <video class="pet-video" :src="pet.video" type="video/mp4">
      </video>
      <view class="pet-info">
        <text class="pet-name">{{ pet.petName }}</text>
        <text class="pet-description">{{ pet.description }}</text>
        <text class="pet-price">¥ {{ pet.price }}</text>
      </view>

      <!-- 增加的商店链接 -->
      <view class="shop-link" @click="goToShop(pet.shopId)">
        <image class="shop-icon" src="/static/shop.png" mode="aspectFill"></image>
        <text class="shop-text">点击了解更多商店好物</text>
      </view>
      
      <!-- 标语区域 -->
      <view class="notice">
        若想购买宠物，请移步至实体店……
      </view>
    </view>
    <view v-else class="loading">加载中...</view>
  </view>
</template>

<script>
import config from '@/config';  //引入config来设置全局的东西

export default {
  data() {
    return {
      pet: null,  // 存储宠物详细信息
      petId: null // 当前宠物 ID
    };
  },
  onLoad(options) {
    // 从页面参数中获取 petId
    this.petId = options.petId;
    this.fetchPetDetails();
  },
  methods: {
    fetchPetDetails() {
      // 使用 uni.request 获取宠物详细信息
      uni.request({
        url: `${config.apiUrl}/pet/${this.petId}`,
        method: 'GET',
        success: (response) => {
          this.pet = response.data; // 将后端返回的宠物详细信息存储到 pet 中
          console.log(this.pet.video);
        },
        fail: (error) => {
          console.error('Error fetching pet details:', error);
          uni.showToast({
            title: '加载失败，请稍后重试',
            icon: 'none'
          });
        }
      });
    },
    goToShop(shopId) {
      uni.navigateTo({
        url: `/pages/shop/shop?shopId=${shopId}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  height: 100%;
  background-color: #ffefba;
}

.pet-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.pet-video {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.pet-info {
  text-align: center;
}

.pet-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block; /* 每个商品信息占据一行 */
}

.pet-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
  display: block; /* 每个商品信息占据一行 */
}

.pet-price {
  font-size: 20px;
  font-weight: bold;
  color: #f00;
  display: block; /* 每个商品信息占据一行 */
}

.loading {
  text-align: center;
  color: #666;
  font-size: 16px;
  padding: 20px;
}

.notice {
  margin-top: 20rpx;
  font-size: 16px;
  color: #333;
  text-align: center;
}

.shop-link {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  cursor: pointer;
}

.shop-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}

.shop-text {
  font-size: 36rpx;
  color: #87BC32;
}
</style>
